<template>
  <el-aside width="220px" class="image-aside w-[200px]">
    <div class="i-list">
      <image-aside-item v-for="(item, index) in ImageCategoryList" :active="activeId == item.id"
        @click="changeActive(item)" @editImg="editImg(item)" @delImg="delImg(item.id)">{{ item.name }}
      </image-aside-item>
    </div>
    <div class="i-page">
      <el-pagination @current-change="getLeftList" background layout="prev, next" :total="total" />
    </div>
  </el-aside>

  <form-drawer-component :title="drawerTitle" @submit="addImg(ruleFormRef)" ref="formDrawerRef">
    <el-form :model="form" ref="ruleFormRef" :rules="rules">
      <el-form-item label="name" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="order" prop="order">
        <el-input v-model="form.order" />
      </el-form-item>
    </el-form>
  </form-drawer-component>
</template>

<script setup>
import { useAddImg1 } from '@/composables/useImage'
import ImageAsideItem from '@/components/ImageAsideItem.vue'
import FormDrawerComponent from '@/components/FormDrawer.vue'
import { deleteImageClass } from '@/api/http'
import { toast } from '../composables/util';
import { ref, computed } from 'vue'
const emit = defineEmits(["change"])
const editId = ref(0)
const { addImg, rules, formDrawerRef, ruleFormRef, form, activeId, ImageCategoryList, getLeftList, total, changeActive } = useAddImg1({
  emit, editId: editId.value
})



const loadData = () => {

}
const drawerTitle = computed(() => editId.value ? "修改" : "新增")
const changeDrawer = (bol) => formDrawerRef.value.showDrawer(bol)



const editImg = (item) => {
  editId.value = item.id
  form.name = item.name
  form.order = item.order
  formDrawerRef.value.showDrawer(true)

}

const delImg = (id) => {
  console.log('删除')

  deleteImageClass(activeId.value).then(res => {
    getLeftList(1)
    toast('删除成功！')
  })
}

defineExpose({
  changeDrawer
})
</script>

<style>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}

.image-aside .i-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .i-page {
  position: absolute;
  height: 50px;
  right: 0;
  left: 0;
  bottom: 0;
  @apply flex items-center justify-center;
}
</style>
